<script setup>

</script>

<template>
  <view>
    <van-pull-refresh class="pageRefresh" v-bind="$attrs">
      <template #loading>
        <view class="flex-center h-100">
          <view class="loader"></view>
          <view class="m-l-15 m-t-10">正在刷新中...</view>
        </view>
      </template>
      <slot></slot>
    </van-pull-refresh>
  </view>
</template>

<style lang="scss" scoped>
.loader {
  width: 30rpx;
  aspect-ratio: 1.154;
  display: grid;
  color: #969799;
  background: linear-gradient(to bottom left, #0000 calc(50% - 1rpx), currentColor 0 calc(50% + 1rpx), #0000 0) right/50% 100%,
  linear-gradient(to bottom right, #0000 calc(50% - 1rpx), currentColor 0 calc(50% + 1rpx), #0000 0) left /50% 100%,
  linear-gradient(currentColor 0 0) bottom/100% 2rpx;
  background-repeat: no-repeat;
  transform-origin: 50% 66%;
  animation: l5 4s infinite linear;
  z-index: 999;
}

.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  background: inherit;
  transform-origin: inherit;
  animation: inherit;
}

.loader::after {
  animation-duration: 2s;
}

@keyframes l5 {
  100% {
    transform: rotate(1turn)
  }
}

:deep(.pageRefresh) .van-pull-refresh__track {
  min-height: fit-content;
}
</style>